import React, { PureComponent, Fragment } from 'react';
import moment from 'moment/moment';
import {
  Form,
  Input,
  Select,
  DatePicker,
  Modal,
  Radio, Icon, Tooltip,
} from 'antd';
import { phone, email } from '@/utils/regular';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const dateFormat = 'YYYY-MM-DD';

const RadioGroup = Radio.Group;

//更新和新增用户信息   modalVisible

@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      listData: {
        realName: '',
      },
    };

    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  // 表单
  renderContent = () => {
    const { form, values, deptList, modalVisible } = this.props;
    const children = [];
    let deptNo = '';
    for (let i = 0; i < deptList.length; i++) {
      children.push(<Option key={deptList[i].deptNo} value={deptList[i].deptNo}>{deptList[i].deptName}</Option>);
      if (values.deptName === deptList[i].deptName) {
        deptNo = deptList[i].deptNo;
      }
    }
    return [
      <FormItem key="realName" {...this.formLayout} label="真实姓名">
        {form.getFieldDecorator('realName', {
          rules: [{ required: true, message: '请输入真实姓名！' }],
          initialValue: values.realName,
        })(<Input placeholder="请输入真实姓名"/>)}
      </FormItem>,
      <FormItem key="pwd" {...this.formLayout} label={<Tooltip title="8-18位，至少包含字母（区分大小写）、数字、符号中的三种">
        密码<Icon style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }} type="info-circle-o"/>
      </Tooltip>}>
        {form.getFieldDecorator('pwd', {
          rules: [{ required: modalVisible, message: '请输入密码！' }],
        })(<Input type={'password'} autocomplete='new-password' placeholder="请输入密码"/>)}
      </FormItem>,
      <FormItem key="mobile"   {...this.formLayout} label="手机号">
        {form.getFieldDecorator('mobile', {
          rules: [
            { required: true, message: '请输入手机号！' },
            { pattern: phone, message: '请输入正确手机号' },
          ],
          initialValue: values.mobile,
        })(<Input type={'number'} placeholder="请输入手机号"/>)}
      </FormItem>,
      <FormItem key="email" {...this.formLayout} label="邮箱">
        {form.getFieldDecorator('email', {
          rules: [{ required: true, message: '请输入邮箱！' },
            { type: 'email', message: '请输入正确邮箱' },
          ],
          initialValue: values.email,
        })(<Input placeholder="请输入邮箱"/>)}
      </FormItem>,
      <FormItem key="deptNos" {...this.formLayout} label="部门名称">
        {form.getFieldDecorator('deptNos', {
          rules: [{ required: true, message: '请选择部门！' }],
          initialValue: deptNo,

        })(
          <Select style={{ width: '100%' }} placeholder="请输入部门">
            {children}
          </Select>,
        )}
      </FormItem>,
      <FormItem key="entryTime" {...this.formLayout} label="入职时间">
        {form.getFieldDecorator('entryTime', {
          rules: [{ required: true, message: '请选择入职时间！' }],
          initialValue: moment(values.entryTime),
        })(<DatePicker placeholder="选择入职时间" format={dateFormat}/>)}
      </FormItem>,
      <FormItem key="status" {...this.formLayout} label="状态">
        {form.getFieldDecorator('status', {
          rules: [{ required: true, message: '请选择状态！' }],
          initialValue: JSON.stringify(values.status),
        })(
          <RadioGroup>
            <Radio value="1">启用</Radio>
            <Radio value="2">停用</Radio>
          </RadioGroup>,
        )}
      </FormItem>,
      <FormItem key="gender" {...this.formLayout} label="性别">
        {form.getFieldDecorator('gender', {
          rules: [{ required: true, message: '请选择性别！' }],
          initialValue: JSON.stringify(values.gender),
        })(
          <RadioGroup>
            <Radio value="1">女</Radio>
            <Radio value="2">男</Radio>
          </RadioGroup>,
        )}
      </FormItem>,
      <FormItem key="address" {...this.formLayout} label="住址">
        {form.getFieldDecorator('address', {
          rules: [{ required: false, message: '请输入至少五个字符的住址！', min: 5 }],
          initialValue: values.address,
        })(<TextArea rows={4} placeholder="请输入至少五个字符"/>)}
      </FormItem>,
    ];
  };

  //弹窗
  render() {
    const { updateModalVisible, handleUpdateModalVisible, modalVisible } = this.props;
    const { values } = this.props;
    this.setState({
      listData: values,
    });
    //完成
    const handleNexts = () => {
      console.log(121);
      const { form, values, handleUpdate, handleAdd, modalVisible } = this.props;
      form.validateFields((err, fieldsValue) => {
        console.log(1212121);
        console.log(fieldsValue);
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        formVals.gender = Number(formVals.gender);
        formVals.status = Number(formVals.status);
        formVals.deptNos = [formVals.deptNos];
        formVals.entryTime = formVals.entryTime.format('YYYY-MM-DD');

        if (modalVisible) {

          handleAdd(formVals);
        } else {
          handleUpdate(formVals);

        }
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={modalVisible ? '新增用户' : '修改用户'}
        visible={updateModalVisible}
        onOk={handleNexts}
        onCancel={() => handleUpdateModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
